<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="visible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="close"
      lock-scroll
      custom-class="crud-dialog large"
      :append-to-body="false"
      :destroy-on-close="!visible"
    >
      <div v-loading="loading" class="video-panel">
        <TheVideo :video-url="videoUrl">
          <template #btn-config v-if="!video.nationalStandard && dialogTitle != '历史回放'">
            <!-- <el-tag size="small" type="info" effect="dark" class="btn-box" @click="changeVideo('02')"
              >标清</el-tag
            >
            <el-tag size="small" type="info" effect="dark" class="btn-box" @click="changeVideo('01')"
              >高清</el-tag
            > -->
            <i class="icon-text">切换码流</i>
            <el-dropdown size="small" @command="changeVideo">
              <span class="el-dropdown-link">
                <i class="iconfont icon-liuchang iconfont-btn" v-if="radio1 == '02'"></i>
                <i class="iconfont icon-gaoqing iconfont-btn" v-if="radio1 == '01'"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="01">高清</el-dropdown-item>
                <el-dropdown-item command="02">流畅</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <!-- <i class="iconfont icon-liuchang iconfont-btn" v-if="radio1 == '02'" @click="changeVideo('01')"></i>
            <i class="iconfont icon-gaoqing iconfont-btn" v-if="radio1 == '01'" @click="changeVideo('02')"></i> -->
          </template>
        </TheVideo>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TheVideo from '@/components/video/videoSimple'
import { startRealtimeVideoStream, stopRealtimeVideoStream, keepRealtimeVideoStream, sendRecorderToVideo } from '@/api/video'
export default {
  components: {
    TheVideo
  },

  data() {
    return {
      visible: false,
      video: {},
      keepInterval: undefined,
      isStreamLive: false,
      loading: false,
      dialogTitle: '',
      muted: true,
      radio1: '02',
      videoUrl: undefined
    }
  },
  mounted() {},

  methods: {
    open(videoInfo) {
      console.log('🤡 ~ videoInfo:', videoInfo)
      this.radio1 = '02'
      this.video = videoInfo
      if (this.video.timeRange) {
        this.dialogTitle = '历史回放'
      } else {
        this.dialogTitle = '实时监控'
      }
      this.visible = true
      this.$nextTick(() => {
        this.initVideo(this.video)
      })
    },
    close() {
      this.visible = false
      this.videoUrl = undefined
      this.$emit('close')
      if (this.video && this.isStreamLive) {
        this.stopVideoStream(this.video)
      }
    },

    // 停止直播流
    stopVideoStream(video) {
      this.clearKeepInterval()
      // 暂时关闭直播流停止的接口调用，后端已经修改为自行处理关闭

      // 历史回放流时，调用停止接口
      if (this.video.timeRange) {
        // stopRealtimeVideoStream({
        //   cameraId: video.id,
        //   // clientType: 1,
        //   // platform: "sturgeon",
        //   // streamQuality: "01",
        //   channelId: video.channel,
        //   streamType: video.timeRange ? 2 : 1, // 历史流2，实时流1
        //   shipCatCode: video.shipcatCode,
        //   startTime: video.timeRange && video.timeRange[0],
        //   endTime: video.timeRange && video.timeRange[1],
        // });
      }

      this.isStreamLive = false
    },
    // 清除心跳保活定时器
    clearKeepInterval() {
      if (this.keepInterval) {
        clearInterval(this.keepInterval)
      }
      this.keepInterval = undefined
    },
    // 开启心跳发送，保活
    startKeepVideo(video) {
      this.clearKeepInterval()
      this.keepInterval = setInterval(() => {
        keepRealtimeVideoStream({
          cameraId: video.id,
          // clientType: 1,
          // platform: "sturgeon",
          // streamQuality: "01",
          channelId: video.channel,
          streamType: video.timeRange ? 2 : 1, // 历史流2，实时流1
          shipCatCode: video.shipcatCode,
          startTime: video.timeRange && video.timeRange[0],
          endTime: video.timeRange && video.timeRange[1]
        })
      }, 60000)
    },
    async changeVideo(val) {
      console.log('🚀 ~  val: ', val)
      this.radio1 = val
      this.loading = true
      const startResult = await startRealtimeVideoStream({
        cameraId: this.video.id,
        clientType: 1,
        platform: 'sturgeon',
        streamQuality: this.radio1, // 大华的streamQuality为0，海康的为01
        channelId: this.video.channel,
        streamType: this.video.timeRange ? 2 : 1, // 历史流2，实时流1
        shipCatCode: this.video.shipcatCode,
        cameraType: this.video.cameraType,
        startTime: this.video.timeRange && this.video.timeRange[0],
        endTime: this.video.timeRange && this.video.timeRange[1]
      })
      this.loading = false

      if (!startResult.result || !startResult.result.streamUrl) {
        return
      }
      this.videoUrl = startResult.result.streamUrl
    },
    async initVideo(video, val = '') {
      // console.log("🤡 ~ video:", video);
      this.loading = true
      const startResult = await startRealtimeVideoStream({
        cameraId: video.id,
        clientType: 1,
        platform: 'sturgeon',
        // streamQuality:val,// 大华的streamQuality为0，海康的为01
        channelId: video.channel,
        streamType: video.timeRange ? 2 : 1, // 历史流2，实时流1
        shipCatCode: video.shipcatCode,
        cameraType: video.cameraType,
        startTime: video.timeRange && video.timeRange[0],
        endTime: video.timeRange && video.timeRange[1]
      })
      this.loading = false

      if (!startResult.result || !startResult.result.streamUrl) {
        return
      }
      this.videoUrl = startResult.result.streamUrl

      this.isStreamLive = true
      // this.startKeepVideo(video);
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 3px;
  border-radius: 0;
}
.video-panel {
  width: 100%;
  height: 500px;
}
.iconfont-btn {
  font-size: 25px;
  color: #fff;
  cursor: pointer;
}
.icon-gaoqing {
  padding-top: 2px;
}
.icon-text {
  font-size: 14px;
  color: #fff;
  margin-right: 10px;
  font-style: normal;
}
</style>
